// 小模块


import { useEffect, useState } from 'react'
import { useSelector} from 'react-redux'
import { Maxmoudles } from './maxmodule'
import { Minmoudles } from './minmodule'
import { getCustomizeModule } from '../../../service/data'
import './mall.less'

function Module() {
  const cardId = useSelector(state => state.card.__cardId);
  const [minMoudles, setMinMoudles] = useState([])
  const [maxMoudles, setMaxMoudles] = useState([])

  useEffect(() => {
    if (!cardId) return
    const c = async () => {
      const res = await getCustomizeModule({ isEnabled: 1, cardId: cardId })
      getModuleList(res)
    }
    c()
  }, [cardId])

  // 处理模块数据
  function getModuleList(list) {
    if (!list && list.length === 0) return
    const temp = [...list]
    const minList = []
    const maxList = []
    for (let i = 0; i < temp.length; i++) {
      if (temp[i].elementType === 'SMALL_MODULE') {
        minList.push(temp[i])
      }
      if (temp[i].elementType === 'BIG_MODULE') {
        maxList.push(temp[i])
      }
    }
    setMinMoudles(minList)
    setMaxMoudles(maxList)
  }
  return (
    <>
     <Minmoudles data={minMoudles} />
     <Maxmoudles data={maxMoudles} />
    </>
  )
}
export { Module }